<style lang="less">
  #div_truck_load_message {

  }
</style>

<template>
  <div id="div_truck_load_message">
    <div class="f-mt f-wa f-mb10">
      <ue-search-bar ref="ueSearchBar" v-model="searchForm" :data="querys" label-width="120px">
      </ue-search-bar>
      <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20" @click="$refs.ueSearchBar.reset()">重置</el-button>
      <el-button type="primary" class="f-wa f-fr f-ml10" @click="searchTruckLoadMessagesClick">查询</el-button>
    </div>
    <el-table :data="truckLoadMessages" border style="width: 100%">
      <el-table-column prop="createdDate" label="创建日期"></el-table-column>
      <el-table-column prop="truckBellwetherRealName" label="领头羊信息">
        <template slot-scope="scope">
          {{scope.row.truckBellwetherRealName}}<br>
          {{scope.row.truckBellwetherPhone}}
        </template>
      </el-table-column>
      <el-table-column prop="startAddressNames" label="起运地" width="180px">
        <template slot-scope="scope">
          {{scope.row.startProvinceName}}{{scope.row.startCityName}}{{scope.row.startCountyName}}
        </template>
      </el-table-column>
      <el-table-column prop="endAddressNames" label="目的地" width="180px">
        <template slot-scope="scope">
          {{scope.row.endProvinceName}}{{scope.row.endCityName}}{{scope.row.endCountyName}}
        </template>
      </el-table-column>
      <el-table-column label="车辆信息" align="center">
        <template slot-scope="scope">
          {{scope.row.trucksTypeName}}|{{scope.row.trucksLengthName}}米<br>
          {{scope.row.weight}}吨|{{scope.row.volume}}方
        </template>
      </el-table-column>
      <el-table-column label="剩余车辆/发布数量">
        <template slot-scope="scope">
          {{scope.row.number - scope.row.useNumber}} / {{scope.row.number}}
        </template>
      </el-table-column>
      <el-table-column prop="originalPrice" label="车价信息">
        <template slot-scope="scope">
          原价：{{scope.row.originalPrice}}<br>
          折扣：{{scope.row.discount}}<br>
          折扣价:{{scope.row.discountPrice}}<br>
        </template>
      </el-table-column>
      <el-table-column prop="startValidTime" label="有效时间">
        <template slot-scope="scope">
          {{scope.row.startValidTime.substring(11, 16) + '-' + scope.row.endValidTime.substring(11, 16)}}
        </template>
      </el-table-column>
      <el-table-column prop="statusName" label="启用状态"></el-table-column>
      <el-table-column prop="compile" label="编辑" width="280px">
        <template slot-scope="scope">
          <!--<el-button type="primary" v-if="scope.row.status===101033002" @click="changeStatus(scope.row,101033001)">启用</el-button>-->
          <el-button type="danger" v-if="scope.row.status===101033001" @click="changeStatus(scope.row,101033002)">禁用
          </el-button>
          <el-button type="warning" @click="selectTruckLoadMessage(scope.row.id)">查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total" style="float: right">
    </el-pagination>
    <truck-load-message-detail-dialog :time="time" :type="model"></truck-load-message-detail-dialog>
  </div>
</template>

<script>
import {
  searchTruckLoadMessages,
  changeStatus
} from '../../api/truck-load/TruckLoadMessage.js';
import { objToFilter } from '../../lib/util.js';
import TruckLoadMessageDetailDialog from './TruckLoadMessageDetailDialog.vue';

export default {
  components: {
    TruckLoadMessageDetailDialog
  },
  data () {
    return {
      time: new Date().getTime(),
      model: {},
      isShow: false,
      truckLoadMessages: [],
      searchForm: {},
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    searchTruckLoadMessagesClick () {
      let o = Object.assign({}, this.searchForm);
      let filters = objToFilter(o);
      this.findTruckLoadMessagesByFilters(filters);
    },
    changeStatus (row, status) {
      this.$confirm('此操作将该数据改为' + (status === 101033001 ? '启用' : '禁用') + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        changeStatus(row.id, status).then((res) => {
          let msg = status === 101033001 ? '启用' : '禁用';
          if (res.status === 200) {
            this.$message.success(msg + '成功');
            this.searchTruckLoadMessagesClick();
          } else {
            this.$message.error(msg + '失败');
          }
        });
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    },
    findTruckLoadMessagesByFilters (filters) {
      this.searchTruckLoadMessages(filters);
    },
    searchTruckLoadMessages (filters) {
      console.log(filters);
      searchTruckLoadMessages({
        filters: filters,
        sort: 'createdDate,desc',
        page: this.currentPage - 1,
        size: this.pageSize
      }).then((res) => {
        this.truckLoadMessages = res.data;
        this.total = Number(res.headers['x-total-count']);
      });
    },
    // 查看详情
    selectTruckLoadMessage (id, type) {
      this.time = new Date().getTime();
      this.model = {id: id};
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTruckLoadMessagesClick();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTruckLoadMessagesClick();
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.searchTruckLoadMessagesClick();
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#default'] || [];
    }
  }
};
</script>
